<template>
	<view>
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" :safe-area-inset-bottom="true">
			<view class="content_box">
				<view class="title_box">预约套餐</view>
				<view class="" style="margin-top: 36rpx">
					<view class="item_box">
						<text class="label">套餐：</text>
						<u-tag
							:text="getWeek(info.groundingTime)"
							mode="dark"
							shape="circle"
							size="mini"
							type="warning"
						/>
						<text style="margin-left: 20rpx">{{ info.comboName }}</text>
					</view>
					<view class="item_box">
						<text class="label">数量：</text>
						<u-number-box :max="99" :min="1" v-model="value"></u-number-box>
					</view>
				</view>
				<view class="btn_box">
					<u-button type="warning" @click="submitBtn" shape="circle">去下单</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'ReservationPackage',
	data() {
		return {
			show: false,
			value: 1,
			info: {}
		}
	},
	methods: {
		showPopup(item) {
			this.show = true
			this.info = item
			this.value = 1
		},
		async submitBtn() {
			const comboReservationList = [{ ...this.info, number: this.value }]
			
			setTimeout(() => {
				uni.$emit('comboReservationList', { comboReservationList })
			}, 200)
			this.show = false
			uni.navigateTo({
				url: '/pages/order/confirmOrder'
			})
		},
		getWeek(date) {
			// 时间戳
			const week = this.moment(date).day()

			switch (week) {
				case 1:
					return '周一'
				case 2:
					return '周二'
				case 3:
					return '周三'
				case 4:
					return '周四'
				case 5:
					return '周五'
				case 6:
					return '周六'
				case 0:
					return '周日'
			}
		}
	}
}
</script>

<style lang="less" scoped>
.content_box {
	padding: 25rpx 50rpx;

	.title_box {
		font-size: 36rpx;
		text-align: center;
	}

	.item_box {
		margin-bottom: 26rpx;

		.label {
			font-size: 28rpx;
			color: rgba(16, 16, 16, 0.49);
		}
	}

	.btn_box {
		margin-top: 40rpx;
	}
}
</style>
